<!--<template>-->
<!--  <div class="dashboard">-->
<!--    <div class="dashboard-container">-->
<!--      &lt;!&ndash; 左侧信息和导航区域 &ndash;&gt;-->
<!--      <div class="left-section">-->
<!--        <div class="product-info">-->
<!--          <h3>系统信息</h3>-->
<!--          <p>AI-Net Storage</p>-->
<!--        </div>-->
<!--        &lt;!&ndash; 第一组导航 &ndash;&gt;-->
<!--        <div class="nav-items">-->
<!--          <div class="nav-item">-->
<!--            <i class="icon">💻</i>-->
<!--            <span>管理虚拟机</span>-->
<!--          </div>-->
<!--          <div class="nav-item">-->
<!--            <i class="icon">🔍</i>-->
<!--            <span>健康巡检</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        &lt;!&ndash; 第二组导航 &ndash;&gt;-->
<!--        <div class="nav-items">-->
<!--          <div class="nav-item">-->
<!--            <i class="icon">📊</i>-->
<!--            <span>性能数据</span>-->
<!--          </div>-->
<!--          <div class="nav-item">-->
<!--            <i class="icon">📝</i>-->
<!--            <span>操作日志</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 右侧状态指标区域 &ndash;&gt;-->
<!--      <div class="right-section">-->
<!--        <div class="status-indicators">-->
<!--          <div class="status-card">-->
<!--            <div class="status-label">虚拟机资源</div>-->
<!--            <div class="status-content">-->
<!--              <div class="circle-progress">-->
<!--                <svg viewBox="0 0 100 100">-->
<!--                  <circle class="circle-bg" cx="50" cy="50" r="45"/>-->
<!--                  <circle class="circle-progress-path" cx="50" cy="50" r="45"/>-->
<!--                </svg>-->
<!--                <div class="circle-content">-->
<!--                  <span class="status-number">36</span>-->
<!--                  <div class="status-details">-->
<!--                    <span class="detail-item green">●20</span>-->
<!--                    <span class="detail-item blue">●16</span>-->
<!--                    <span class="detail-item gray">●0</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="status-stats">-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">运行</span>-->
<!--                  <span class="stat-value green">20</span>-->
<!--                </div>-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">已停止</span>-->
<!--                  <span class="stat-value blue">16</span>-->
<!--                </div>-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">故障</span>-->
<!--                  <span class="stat-value gray">0</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="status-card">-->
<!--            <div class="status-label">容量</div>-->
<!--            <div class="status-content">-->
<!--              <div class="circle-progress">-->
<!--                <svg viewBox="0 0 100 100">-->
<!--                  <circle class="circle-bg" cx="50" cy="50" r="45"/>-->
<!--                  <circle class="circle-progress-path" cx="50" cy="50" r="45" style="stroke: #2196F3; stroke-dashoffset: 180;"/>-->
<!--                </svg>-->
<!--                <div class="circle-content">-->
<!--                  <span class="status-number">120.5</span>-->
<!--                  <div class="status-details">-->
<!--                    <span class="detail-item blue">TB</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="status-stats">-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">总容量</span>-->
<!--                  <span class="stat-value blue">120.5 TB</span>-->
<!--                </div>-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">已用容量</span>-->
<!--                  <span class="stat-value">45.8 TB</span>-->
<!--                </div>-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">可用容量</span>-->
<!--                  <span class="stat-value">74.7 TB</span>-->
<!--                </div>-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">使用率</span>-->
<!--                  <span class="stat-value">38%</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="status-card">-->
<!--            <div class="status-label">当前告警</div>-->
<!--            <div class="status-content">-->
<!--              <div class="circle-progress">-->
<!--                <svg viewBox="0 0 100 100">-->
<!--                  <circle class="circle-bg" cx="50" cy="50" r="45"/>-->
<!--                  <circle class="circle-progress-path warning" cx="50" cy="50" r="45"/>-->
<!--                </svg>-->
<!--                <div class="circle-content">-->
<!--                  <span class="status-number">31</span>-->
<!--                  <div class="status-details">-->
<!--                    <span class="detail-item orange">●24</span>-->
<!--                    <span class="detail-item yellow">●7</span>-->
<!--                    <span class="detail-item gray">●0</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="status-stats">-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">严重</span>-->
<!--                  <span class="stat-value orange">24</span>-->
<!--                </div>-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">警告</span>-->
<!--                  <span class="stat-value yellow">7</span>-->
<!--                </div>-->
<!--                <div class="stat-item">-->
<!--                  <span class="stat-label">提示</span>-->
<!--                  <span class="stat-value gray">0</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 主要内容区域 &ndash;&gt;-->
<!--    <div class="main-content">-->
<!--      &lt;!&ndash; 性能图表区域 &ndash;&gt;-->
<!--      <div class="performance-charts">-->
<!--        <div class="chart-section">-->
<!--          <h3>计算资源</h3>-->
<!--          <div class="chart-container">-->
<!--            <div class="chart-item">-->
<!--              <div class="chart-circle">-->
<!--                <span class="percentage">10.64%</span>-->
<!--              </div>-->
<!--              <div class="chart-label">CPU</div>-->
<!--            </div>-->
<!--            <div class="chart-item">-->
<!--              <div class="chart-circle">-->
<!--                <span class="percentage">26.04%</span>-->
<!--              </div>-->
<!--              <div class="chart-label">内存</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="chart-section">-->
<!--          <h3>CPU使用率</h3>-->
<!--          <canvas id="cpuChart"></canvas>-->
<!--        </div>-->

<!--        <div class="chart-section">-->
<!--          <h3>内存使用情况</h3>-->
<!--          <canvas id="memoryChart"></canvas>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 存储性能区域 &ndash;&gt;-->
<!--      <div class="storage-metrics">-->
<!--        <div class="metric-card">-->
<!--          <h4>IOPS(IO/s)</h4>-->
<!--          <div class="metric-value">0</div>-->
<!--          <canvas class="metric-chart"></canvas>-->
<!--        </div>-->
<!--        <div class="metric-card">-->
<!--          <h4>总带宽(MB/s)</h4>-->
<!--          <div class="metric-value">0</div>-->
<!--          <canvas class="metric-chart"></canvas>-->
<!--        </div>-->
<!--        <div class="metric-card">-->
<!--          <h4>I/O响应时间(ms)</h4>-->
<!--          <div class="metric-value">0</div>-->
<!--          <canvas class="metric-chart"></canvas>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { Chart, registerables } from 'chart.js'-->
<!--Chart.register(...registerables)-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      cpuChart: null,-->
<!--      memoryChart: null,-->
<!--      iopsChart: null, // 新增-->
<!--      cpuData: {-->
<!--        current: 2.77,-->
<!--        max: 3.63-->
<!--      },-->
<!--      memoryData: {-->
<!--        current: 19.1,-->
<!--        max: 19.13-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.initCharts()-->
<!--    this.initIopsChart()-->
<!--    this.initBandwidthChart()-->
<!--    this.initIoResponseChart() // 新增-->
<!--  },-->
<!--  methods: {-->
<!--    initCharts() {-->
<!--      // CPU使用率图表-->
<!--      const cpuCtx = document.getElementById('cpuChart')-->
<!--      if (cpuCtx) {-->
<!--        this.cpuChart = new Chart(cpuCtx, {-->
<!--          type: 'line',-->
<!--          data: {-->
<!--            labels: Array(20).fill(''),-->
<!--            datasets: [{-->
<!--              label: 'CPU使用率',-->
<!--              data: [2.77, 2.8, 2.9, 3.0, 3.1, 3.2, 3.3, 3.4, 3.5, 3.63],-->
<!--              borderColor: '#36A2EB',-->
<!--              tension: 0.4,-->
<!--              fill: false-->
<!--            }]-->
<!--          },-->
<!--          options: {-->
<!--            responsive: true,-->
<!--            scales: {-->
<!--              y: {-->
<!--                beginAtZero: true,-->
<!--                max: 100-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        })-->
<!--      }-->

<!--      // 内存使用情况图表-->
<!--      const memoryCtx = document.getElementById('memoryChart')-->
<!--      if (memoryCtx) {-->
<!--        this.memoryChart = new Chart(memoryCtx, {-->
<!--          type: 'line',-->
<!--          data: {-->
<!--            labels: Array(20).fill(''),-->
<!--            datasets: [{-->
<!--              label: '内存使用率',-->
<!--              data: [19.1, 19.11, 19.12, 19.13],-->
<!--              borderColor: '#FF6384',-->
<!--              tension: 0.4,-->
<!--              fill: false-->
<!--            }]-->
<!--          },-->
<!--          options: {-->
<!--            responsive: true,-->
<!--            scales: {-->
<!--              y: {-->
<!--                beginAtZero: true,-->
<!--                max: 100-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--    },-->
<!--    initIopsChart() {-->
<!--      // 获取第一个.metric-chart canvas-->
<!--      const iopsCtx = document.querySelectorAll('.metric-chart')[0]-->
<!--      if (iopsCtx) {-->
<!--        // 生成60个0-500之间的随机数，模拟剧烈波动-->
<!--        const iopsData = Array.from({ length: 60 }, () => Math.floor(Math.random() * 500))-->
<!--        this.iopsChart = new Chart(iopsCtx, {-->
<!--          type: 'line',-->
<!--          data: {-->
<!--            labels: Array.from({ length: 60 }, (_, i) => i + '分'),-->
<!--            datasets: [{-->
<!--              label: 'IOPS',-->
<!--              data: iopsData,-->
<!--              borderColor: '#36A2EB',-->
<!--              backgroundColor: 'rgba(54,162,235,0.1)',-->
<!--              tension: 0.4,-->
<!--              fill: true,-->
<!--              pointRadius: 0-->
<!--            }]-->
<!--          },-->
<!--          options: {-->
<!--            responsive: true,-->
<!--            animation: false,-->
<!--            scales: {-->
<!--              y: {-->
<!--                beginAtZero: true,-->
<!--                max: 500,-->
<!--                title: {-->
<!--                  display: true,-->
<!--                  text: 'IOPS'-->
<!--                }-->
<!--              },-->
<!--              x: {-->
<!--                title: {-->
<!--                  display: true,-->
<!--                  text: '时间（分钟）'-->
<!--                }-->
<!--              }-->
<!--            },-->
<!--            plugins: {-->
<!--              legend: {-->
<!--                display: false-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--    },-->
<!--    initBandwidthChart() {-->
<!--      // 获取第二个.metric-chart canvas-->
<!--      const bandwidthCtx = document.querySelectorAll('.metric-chart')[1]-->
<!--      if (bandwidthCtx) {-->
<!--        // 生成60个0-7000之间的随机数，模拟波动-->
<!--        const bandwidthData = Array.from({ length: 60 }, () => Math.floor(Math.random() * 7000))-->
<!--        this.bandwidthChart = new Chart(bandwidthCtx, {-->
<!--          type: 'line',-->
<!--          data: {-->
<!--            labels: Array.from({ length: 60 }, (_, i) => i + '分'),-->
<!--            datasets: [{-->
<!--              label: '总带宽(MB/s)',-->
<!--              data: bandwidthData,-->
<!--              borderColor: '#FF9800',-->
<!--              backgroundColor: 'rgba(255,152,0,0.1)',-->
<!--              tension: 0.4,-->
<!--              fill: true,-->
<!--              pointRadius: 0-->
<!--            }]-->
<!--          },-->
<!--          options: {-->
<!--            responsive: true,-->
<!--            animation: false,-->
<!--            scales: {-->
<!--              y: {-->
<!--                beginAtZero: true,-->
<!--                max: 7000,-->
<!--                title: {-->
<!--                  display: true,-->
<!--                  text: 'MB/s'-->
<!--                }-->
<!--              },-->
<!--              x: {-->
<!--                title: {-->
<!--                  display: true,-->
<!--                  text: '时间（分钟）'-->
<!--                }-->
<!--              }-->
<!--            },-->
<!--            plugins: {-->
<!--              legend: {-->
<!--                display: false-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--    },-->
<!--    initIoResponseChart() {-->
<!--      // 获取第三个.metric-chart canvas-->
<!--      const ioRespCtx = document.querySelectorAll('.metric-chart')[2]-->
<!--      if (ioRespCtx) {-->
<!--        // 生成60个0-100之间的随机数，20%概率为20-100（异常），其余为0-20（正常）-->
<!--        const ioRespData = Array.from({ length: 60 }, () => {-->
<!--          return Math.random() < 0.2-->
<!--              ? Math.floor(Math.random() * 80) + 20 // 20-100-->
<!--              : Math.floor(Math.random() * 21)      // 0-20-->
<!--        })-->
<!--        this.ioRespChart = new Chart(ioRespCtx, {-->
<!--          type: 'line',-->
<!--          data: {-->
<!--            labels: Array.from({ length: 60 }, (_, i) => i + '分'),-->
<!--            datasets: [{-->
<!--              label: 'I/O响应时间(ms)',-->
<!--              data: ioRespData,-->
<!--              borderColor: '#E91E63',-->
<!--              backgroundColor: 'rgba(233,30,99,0.1)',-->
<!--              tension: 0.4,-->
<!--              fill: true,-->
<!--              pointRadius: 0-->
<!--            }]-->
<!--          },-->
<!--          options: {-->
<!--            responsive: true,-->
<!--            animation: false,-->
<!--            scales: {-->
<!--              y: {-->
<!--                beginAtZero: true,-->
<!--                max: 100,-->
<!--                title: {-->
<!--                  display: true,-->
<!--                  text: '响应时间（ms）'-->
<!--                }-->
<!--              },-->
<!--              x: {-->
<!--                title: {-->
<!--                  display: true,-->
<!--                  text: '时间（分钟）'-->
<!--                }-->
<!--              }-->
<!--            },-->
<!--            plugins: {-->
<!--              legend: {-->
<!--                display: false-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.dashboard {-->
<!--  background-color: #1a1f2c;-->
<!--  color: #ffffff;-->
<!--  min-height: 100vh;-->
<!--}-->

<!--.dashboard-container {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  background-color: #242836;-->
<!--  padding: 24px;-->
<!--  border-bottom: 1px solid rgba(255, 255, 255, 0.1);-->
<!--}-->

<!--.left-section {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  gap: 24px;-->
<!--  min-width: 320px;-->
<!--  background: rgba(255, 255, 255, 0.05);-->
<!--  padding: 20px;-->
<!--  border-radius: 8px;-->
<!--}-->

<!--.product-info {-->
<!--  margin-bottom: 16px;-->
<!--  padding-bottom: 16px;-->
<!--  border-bottom: 1px solid rgba(255, 255, 255, 0.1);-->
<!--}-->

<!--.product-info h3 {-->
<!--  font-size: 14px;-->
<!--  color: #a8b3c5;-->
<!--  margin: 0;-->
<!--  margin-bottom: 8px;-->
<!--}-->

<!--.product-info p {-->
<!--  font-size: 18px;-->
<!--  margin: 0;-->
<!--  color: #fff;-->
<!--  font-weight: 500;-->
<!--}-->

<!--.nav-items {-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  gap: 12px;-->
<!--  align-items: center;-->
<!--}-->

<!--.nav-items + .nav-items {-->
<!--  margin-top: 12px;-->
<!--}-->

<!--.nav-item {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 8px;-->
<!--  padding: 10px 16px;-->
<!--  cursor: pointer;-->
<!--  color: #a8b3c5;-->
<!--  transition: all 0.3s;-->
<!--  white-space: nowrap;-->
<!--  border-radius: 4px;-->
<!--  background: rgba(255, 255, 255, 0.03);-->
<!--}-->

<!--.nav-item:hover {-->
<!--  color: #fff;-->
<!--  background-color: rgba(255, 255, 255, 0.1);-->
<!--}-->

<!--.icon {-->
<!--  font-size: 16px;-->
<!--  opacity: 0.8;-->
<!--}-->

<!--.right-section {-->
<!--  flex: 1;-->
<!--  margin-left: -200px;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.main-content {-->
<!--  padding: 24px;-->
<!--}-->

<!--.status-indicators {-->
<!--  display: flex;-->
<!--  gap: 20px;-->
<!--  margin-left: auto;-->
<!--}-->

<!--.status-card {-->
<!--  text-align: left;-->
<!--  padding: 20px;-->
<!--  background: rgba(255, 255, 255, 0.05);-->
<!--  border-radius: 8px;-->
<!--  min-width: 280px;-->
<!--}-->

<!--.status-label {-->
<!--  font-size: 14px;-->
<!--  color: #a8b3c5;-->
<!--  margin-bottom: 16px;-->
<!--}-->

<!--.status-content {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 24px;-->
<!--}-->

<!--.circle-progress {-->
<!--  position: relative;-->
<!--  width: 100px;-->
<!--  height: 100px;-->
<!--}-->

<!--.circle-progress svg {-->
<!--  transform: rotate(-90deg);-->
<!--  overflow: visible;-->
<!--}-->

<!--.circle-bg {-->
<!--  fill: none;-->
<!--  stroke: rgba(255, 255, 255, 0.1);-->
<!--  stroke-width: 8;-->
<!--}-->

<!--.circle-progress-path {-->
<!--  fill: none;-->
<!--  stroke: #4CAF50;-->
<!--  stroke-width: 8;-->
<!--  stroke-dasharray: 283;-->
<!--  stroke-dashoffset: 70;-->
<!--  transition: stroke-dashoffset 0.5s ease;-->
<!--}-->

<!--.circle-progress-path.inactive {-->
<!--  stroke: #666;-->
<!--  stroke-dashoffset: 283;-->
<!--}-->

<!--.circle-progress-path.warning {-->
<!--  stroke: #FF5722;-->
<!--  stroke-dashoffset: 100;-->
<!--}-->

<!--.circle-content {-->
<!--  position: absolute;-->
<!--  top: 50%;-->
<!--  left: 50%;-->
<!--  transform: translate(-50%, -50%);-->
<!--  text-align: center;-->
<!--}-->

<!--.status-number {-->
<!--  font-size: 24px;-->
<!--  font-weight: bold;-->
<!--  color: #fff;-->
<!--  display: block;-->
<!--}-->

<!--.status-details {-->
<!--  display: flex;-->
<!--  gap: 6px;-->
<!--  font-size: 12px;-->
<!--  margin-top: 4px;-->
<!--}-->

<!--.status-stats {-->
<!--  flex: 1;-->
<!--}-->

<!--.stat-item {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-bottom: 8px;-->
<!--}-->

<!--.stat-label {-->
<!--  color: #a8b3c5;-->
<!--  font-size: 13px;-->
<!--}-->

<!--.stat-value {-->
<!--  font-weight: bold;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.green { color: #4CAF50; }-->
<!--.blue { color: #2196F3; }-->
<!--.orange { color: #FF5722; }-->
<!--.yellow { color: #FFC107; }-->
<!--.gray { color: #9E9E9E; }-->

<!--@keyframes rotate {-->
<!--  from {-->
<!--    transform: rotate(0deg);-->
<!--  }-->
<!--  to {-->
<!--    transform: rotate(360deg);-->
<!--  }-->
<!--}-->

<!--.circle-progress svg {-->
<!--  animation: rotate 30s linear infinite;-->
<!--}-->

<!--.performance-charts {-->
<!--  display: grid;-->
<!--  grid-template-columns: 1fr 2fr 2fr;-->
<!--  gap: 20px;-->
<!--  margin-bottom: 30px;-->
<!--}-->

<!--.chart-section {-->
<!--  background-color: #242836;-->
<!--  padding: 20px;-->
<!--  border-radius: 8px;-->
<!--}-->

<!--.chart-container {-->
<!--  display: flex;-->
<!--  justify-content: space-around;-->
<!--}-->

<!--.chart-circle {-->
<!--  width: 100px;-->
<!--  height: 100px;-->
<!--  border-radius: 50%;-->
<!--  border: 4px solid #36A2EB;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.storage-metrics {-->
<!--  display: grid;-->
<!--  grid-template-columns: repeat(3, 1fr);-->
<!--  gap: 20px;-->
<!--}-->

<!--.metric-card {-->
<!--  background-color: #242836;-->
<!--  padding: 20px;-->
<!--  border-radius: 8px;-->
<!--}-->

<!--.metric-value {-->
<!--  font-size: 24px;-->
<!--  font-weight: bold;-->
<!--  margin: 10px 0;-->
<!--}-->
<!--</style>-->

<template>
  <div class="home-container">
    <img src="@/assets/image.png" alt="容量图片" class="home-image">
  </div>
</template>

<script>
export default {
  name: 'Capacity'
}
</script>

<style scoped>
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-image {
  max-width: 100%;
  height: auto;
}
</style>
